<template>
	<view class="userStyle">
		<!-- <u-navbar placeholder title="个人中心" bgColor="transparent" title-style="color:#fff;font-size: 42rpx;font-weight: 700" >
			<view slot="left">
				
			</view>
		</u-navbar> -->
		<!-- 登录状态 -->
		<template v-if="loginState">
			<view class="usertop position-relative" style="width: 750rpx;height: 400rpx;	
			background: url('/static/pay/01.jpg') no-repeat;background-size: 100% 100%;">
				<view class="position-absolute left-0 w-100" style="top: 130rpx;">
					<view class="" style="height: 90rpx;"></view>

					<view class="flex align-center px-3 mt-2" @click="navPath('pages/user/info')">
						<u-avatar :src="dataInfo.avatar?dataInfo.avatar:'/static/user/Mask group.png' "
							size="70"></u-avatar>
						<view class="ml-2">
							<view class="font-md text-main font-weight-bold mb-1" style="color: #fff;">Hi</view>
							<view class="font-md text-main font-weight-bold" style="color: #fff;">{{dataInfo.nickname}}
							</view>
						</view>
						<view class="ml-auto">
							<u-icon name="arrow-right" color="#fff"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 未登录状态 -->
		<template v-else>
			<view class="usertop" style="background: url('/static/pay/01.jpg') no-repeat;background-size: 100% 100%;">
				<view class="" style="height: 80rpx;"></view>
				<view class="flex align-center px-3 pb-3" @click="navPath('pages/login/login')" style="margin-top: 100rpx;">
					<u-avatar src="/static/user/Mask group.png" size="70"></u-avatar>
					<view class="ml-2">
						<view class="font-md text-main font-weight-bold" style="color: #fff;">点击登录</view>
					</view>
				</view>
			</view>
		</template>


		<view class="mx-2 bg-white p-2 mt-2" style="border-radius: 10rpx;">
			<view class="flex align-center justify-between mb-2">
				<view class="font-30">我的订单</view>
				<view class="ml-auto">
					<u-text suffixIcon="arrow-right" :iconStyle="{color:'#666666'}" text="全部订单" color="#666666"
						size="12" @click="orderClick('全部订单')"></u-text>
				</view>
			</view>
			<u-line color="#eeeeee"></u-line>
			<view class="flex align-center p-2">
				<view class="flex align-center justify-center" style="width: 25%;" v-for="(item,index) in orders"
					:key="index">
					<view class="flex flex-column align-center justify-center" @click="orderClick(item.name)">
						<u-image :src="item.image" width="35" height="35"></u-image>
						<view class="font-30 text-light3F flex align-center justify-center mt-1">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="mx-2 bg-white p-2 mt-2" style="border-radius: 10rpx;">
			<view class="flex align-center"  style="height: 100rpx;" v-for="(item,index) in list" :key="index" @click="navPath(item.url)">
				<u-image :src="item.image" width="18" height="20"></u-image>
				<view class="font-28 text-main ml-2">{{item.name}}</view>
				<view class="ml-auto">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view> -->

		<view style="padding: 20rpx;">
			<view class="mine-tabs-view">
				<view class="mine-tabs-title">常用功能</view>
				<view class="mine-tabs-list">
					<view class="mine-tabs-item" v-for="(item,index) in list" :key="index"
					@click="navPath(item.url)">
						<image class="mine-tabs-image" :src="item.image" mode=""></image>
						<view class="mine-tabs-itemTitle">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>


		<!-- <view class="mx-2 bg-white p-2 mt-2 flex align-center" style="height: 100rpx;">
			<u-icon name='kefu-ermai' size='46rpx' color='#000'></u-icon>
			<view class="font-28 text-main ml-2">联系客服</view>
			<button type="primary" class="share_servcie font-28 text-main ml-2" open-type="contact"
				style="padding-left:0;background-color: #fff;color: black;">联系客服</button>

			<view class="ml-auto">
				<button type="primary" class="share_servcie" open-type="contact"
					style="padding-top:5rpx;width:70rpx;height:88rpx;margin-right:0rpx;background-color: #fff;color: black;">
					<u-icon name="arrow-right" size="20"></u-icon> </button>

				<u-icon name="arrow-right" bold size="36rpx"></u-icon>
			</view>
		</view> -->



	</view>
</template>

<script>
	import {
		base
	} from '@/request/env.js'
	export default {
		data() {
			return {
				loginState: false,
				dataInfo: {},
				orders: [{
					image: '/static/pay/02.png',
					name: '待付款',
					url: ''
				}, {
					image: '/static/pay/03.png',
					name: '待发货',
					url: ''
				}, {
					image: '/static/pay/04.png',
					name: '待收货',
					url: ''
				}, {
					image: '/static/pay/05.png',
					name: '已完成',
					url: ''
				}],
				list: [{
					image: '/static/pay/06.png',
					name: '收货地址',
					url: 'pages/user/path'
				},{
					image: '/static/pay/07.png',
					name: '我的收藏',
					url: 'pages/user/collection'
				},{
					image: '/static/pay/08.png',
					name: '优惠券',
					url: 'pages/user/coupon'
				},{
					image: '/static/pay/09.png',
					name: '联系客服',
					url: 'pages/user/customer-service'
				},{
					image: '/static/pay/10.png',
					name: '开票',
					url: 'pages/user/customer-service1'
				},{
					image: '/static/pay/11.png',
					name: '隐私政策',
					url: 'pages/user/privacy'
				},{
					image: '/static/pay/12.png',
					name: '关于平台',
					url: 'pages/user/about'
				},{
					image: '/static/pay/13.png',
					name: '退出登录',
					url: '退出登录'
				}],
				hardUrl: '',
				moneyUrl: '',
				urls: '', //跳转公众号
				user_info: {
					'invite_code': ''
				},
				gz: 2
			}
		},
		onShow() {
			if (!uni.$u.test.isEmpty(uni.getStorageSync('token'))) {
				this.getData()
			} else {
				this.loginState = false
			}
			let user_info = uni.getStorageSync('userinfo')
			console.log(user_info)
			if (user_info) {
				this.user_info = user_info
			}
		},
		// //转发给朋友
		// onShareAppMessage(res) {
		// 	return {
		// 		title: '五金',
		// 		path: 'pages/user/index?invite_code=' + this.user_info.invite_code
		// 	}
		// },
		// //分享朋友圈
		// onShareTimeline(res) {
		// 	return {
		// 		title: '五金',
		// 		path: 'pages/user/index',
		// 		query: 'invite_code=' + this.user_info.invite_code,
		// 	}
		// },
		onLoad(options) {
			console.log(options)
			this.hardUrl = base + '/image/hard.png'
			this.moneyUrl = base + '/image/money.png'
			let invite_code = '';
			if (options && options.invite_code) {
				invite_code = options.invite_code
			}
			//获取来源
			if (options && options.scene) {
				//params转 obj  字符串参数  a=123&b=456 转 {a:"123",b:"456"}
				var query = this.getRequestParameters(decodeURIComponent(options.scene))
				invite_code = query.invite_code
			}
			if (invite_code) {
				uni.setStorageSync('invite_code', invite_code)
			}
		},
		methods: {
			
			getRequestParameters(params = "") {
				let theRequest = new Object();
				if (params != undefined) {
					let strs = params.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
					}
				}
				return theRequest;
			},
			gogzh() {
				if (uni.$u.test.isEmpty(uni.getStorageSync('token'))) {
					return uni.$u.route('pages/login/login')
				} else {
					uni.navigateTo({
						url: '/pages/webview/webview'
					})
				}

			},
			getData() {
				this.$api.user().then(res => {
					if (res.code === 1) {
						this.dataInfo = res.data
						this.loginState = true
					}
				})
			},
			orderClick(name) {
				uni.$u.route('pages/user/order', {
					name: name
				})

			},
			navPath(path) {
				if (uni.$u.test.isEmpty(uni.getStorageSync('token'))) {
					return uni.$u.route('pages/login/login')
				}
				if(path == '退出登录'){
					uni.clearStorageSync()
					uni.reLaunch({
						url:'/pages/login/login'
					})
				}
				uni.$u.route(path)
			}

		}
	}
</script>

<style lang="scss">
	.mine-tabs-itemTitle{
		font-size: 13px;
		color: #000;
	}
	.mine-tabs-image{
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
		margin-bottom: 20rpx;
	}
	.mine-tabs-item{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 25%;
		margin-bottom: 30rpx;
	}
	.mine-tabs-list{
		display: flex;
		flex-wrap: wrap;
	}
	.mine-tabs-title{
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 50rpx;
	}
	.mine-tabs-view{
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
	.share_servcie {
		&::after {
			border: none;
		}
	}

	.userStyle {
		background: linear-gradient(to right bottom, #ade1b3, #8dc68f) no-repeat;
		background-size: 100% 20%;
	}

	.usertop {
		/* background: url(@/static/user/bg.png) no-repeat; */
		/* background-size: 100% 358rpx;
		height: 358rpx; */
		height: 358rpx;
		// margin-top: -100rpx;
		// background: linear-gradient(to right bottom, #a5e1a6,#85b885);
	}

	.usermoney {
		/* background: url(@/static/user/Group 3645.png) no-repeat; */
		background-size: 100% 132rpx;
		height: 132rpx;
	}

	.gzh {
		display: flex;
		align-items: center;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 20rpx 30rpx;
		height: 80rpx;

		.left {
			width: 13%;

			img {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.cen {
			width: 52%;

			p:nth-child(1) {
				font-size: 30rpx;
				color: #000;
			}

			p:nth-child(2) {
				font-size: 26rpx;
				color: #999;
			}
		}

		.right {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 15rpx;
			color: #fff;
			background-color: #0BCF67;
		}
	}
</style>